@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800);
*, *:after, *:before {
    box-sizing: border-box;
}

body {
    background: #F5F3F4;
    margin: 0;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

h1 {
    color: #4c4c4c;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
}

h2, h4 {
    font-weight: 400;
    color: #4d4d4d;
}

.card {
    display: inline-block;
    margin: 10px;
    background: #fff;
    padding: 15px;
    min-width: 200px;
    box-shadow: 0 3px 5px #ddd;
    color: #555;
}
.card .box {
    width: 100px;
    height: 100px;
    margin: auto;
    background: #ddd;
    cursor: pointer;
    box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
    width: 100px;
    height: 100px;
    position: relative;
    background: #03A9F4;
    opacity: .5;
    box-shadow: 0 0 5px #ccc;
    transition: 0.3s;
}
.card p {
    margin: 25px 0 0;
}

.rotate:hover .fill {
    transform: rotate(45deg);
}

.rotateX:hover .fill {
    transform: rotateX(45deg);
}

.rotateY:hover .fill {
    transform: rotateY(45deg);
}

.rotateZ:hover .fill {
    transform: rotate(45deg);
}

.scale:hover .fill {
    transform: scale(2, 2);
}

.scaleX:hover .fill {
    transform: scaleX(2);
}

.scaleY:hover .fill {
    transform: scaleY(2);
}

.skew:hover .fill {
    transform: skew(45deg, 45deg);
}

.skewX:hover .fill {
    transform: skewX(45deg);
}

.skewY:hover .fill {
    transform: skewY(45deg);
}

.translate:hover .fill {
    transform: translate(45px, 1em);
}

.translateX:hover .fill {
    transform: translateX(45px);
}

.translateY:hover .fill {
    transform: translateY(45px);
}

.matrix:hover .fill {
    transform: matrix(2, 2, 0, 2, 45, 0);
}

.perspective-100 .box {
    perspective: 100px;
}

.perspective-200 .box {
    perspective: 200px;
}

.to-100-0-0 {
    transform-origin: 100% 0 0;
}

.to-0-100-0 {
    transform-origin: 0 100% 0;
}